import { PageModelState } from '@/models/page';
import { Fragment, useEffect } from 'react'
import { useDispatch, useSelector, IRouteComponentProps, ArticleModelState } from 'umi'
import styles from './message.less';
import { IPageComment } from '@/types';
import { Avatar, Button, Comment, Form, Input, List, Tooltip } from 'antd';
import Recommend from '@/components/recommend'

const { TextArea } = Input,
  map: { [key: string]: string } = {
    'msgboard': '2c1794cc-10d8-4d48-adda-7ff02371aee8',
    'about': '8f3973e9-4ed4-4849-ad85-b7d3b8093623'
  }

const Page: React.FC<IRouteComponentProps<{ id: string }>> = ({ match }) => {
  let path = match.params.id,
    id = map[path],
    dispatch = useDispatch(),
    { pageListItem, pageCommentList } = useSelector((state: { page: PageModelState }) => ({ ...state.page }))
   
  useEffect(() => {
    // 获取页面详情 标题
    dispatch({
      type: 'page/getPageViews',
      payload: id
    })
    // 评论列表
    dispatch({
      type: 'page/getCommentList',
      payload: id
    })
  }, [])

  //  监听路由的切换
  useEffect(() => {
    dispatch({
      type: 'page/getPageViews',
      payload: id
    })
  }, [path])

  // 渲染不同的 layout 
  return <Fragment>
    {/* 获取留言页面 */}
    <div className={styles.banner}>
      {path === 'msgboard' ? <div className={styles.markdown_message} dangerouslySetInnerHTML={{ __html: pageListItem.html }} ></div> :
        <div className={styles.about}>
          {/* 关于 页面的 标题 */}
          <img src={pageListItem.cover} />
          <div className={styles.markdown} dangerouslySetInnerHTML={{ __html: pageListItem.html }}></div>
        </div>}
    </div>
    <div className={styles.page}>
      {/* 评论框 */}
      <div className={styles.box}>
        <div className={styles.comment}>
          <div className={styles.title}>
            <p className={styles.word}>评论</p>
            <div className={styles.form}>
              <Form.Item>
                <TextArea rows={4} />
              </Form.Item>
              <Form.Item>
                <Button htmlType="submit" type="primary" className={styles.submit}>
                  发布
                </Button>
              </Form.Item>
            </div>
            {/* 评论列表 */}
            <div>
              {pageCommentList.map((item: IPageComment) => (
                <div className={styles.listItem} key={item.id}>
                  <Comment
                    author={<b>{item.name}</b>}
                    avatar={<Avatar src="https://joeschmoe.io/api/v1/random" alt="Han Solo" />}
                    content={
                      <div>
                        {item.content}
                        <p className={styles.userAgent}>{item.userAgent}</p>
                      </div>
                    }
                    datetime={
                      <Tooltip title={item.updateAt}>
                        <span>6个月前</span>
                        <span>回复</span>
                      </Tooltip>
                    }
                  >
                    {
                      item.children ? item.children.map((ite) => {
                        return <div key={ite.id}> <Comment
                          author={<b>{ite.name}</b>}
                          avatar={<Avatar src="https://joeschmoe.io/api/v1/random" alt="Han Solo" />}
                          content={
                            <div>
                              {ite.content}

                              <p className={styles.userAgent}>{ite.userAgent}</p>
                            </div>
                          }
                          datetime={
                            <Tooltip title={ite.updateAt}>
                              <span>6个月前</span>
                              <span>回复</span>
                            </Tooltip>
                          }
                        /></div>
                      }) : ''
                    }
                  </Comment>
                </div>
              ))}
              <div className={styles.pageClass}>
                fenye
              </div>
            </div>
            {/* 推荐阅读 */}
            <Recommend></Recommend>
          </div>
        </div>
      </div>
    </div>
  </Fragment>
}
export default Page